.left-top-box{
    position: absolute;
    left:10px;
    top:10px;
    z-index: 501;
}
.right-top-box{
    position: absolute;
    right:10px;
    top:10px;
    z-index: 502;
}
.case-btn-box{
    // position: absolute;
    // left:10px;
    // top:10px;
    // z-index: 501;
    // margin:10px 0 0 10px;
    display: flex;
    align-items: flex-start;
    &>ul{
        display: flex;
        margin:0 4px 0 0;
        border: 1px solid rgba(0, 0, 0, .1);
        box-shadow: 0 1px 3px 0 rgba(0,0,0,0.1);
        background: #fff;
        border-radius: 4px;
        padding:2px;
        // overflow: hidden;
        &>li{
            // margin:6px;
            margin:0 0px 0 0;
            position: relative;
            &.move{
                &:hover{
                    &>a{
                        border-radius: 4px;
                        background: #1A9DFB;
                        color:#fff;
                        &>i{
                            color:#fff;
                        }
                        &>p{
                            color:#fff;
                        }
                    }
                    &>.smenu{
                        display: flex;
                    }
                }
            }
            & > .smenu{
                display: none;
                position: absolute;
                padding:6px 0 0 0;
                right:0;
                width:100%;
                // display: flex;
                justify-content:flex-end;
                margin-right:-2px;
                text-align: right;
                ul{
                    border-radius: 4px;
                    border: 1px solid rgba(0, 0, 0, .1);
                    box-shadow: 0 1px 3px 0 rgba(0,0,0,0.1);
                    background: #fff;
                    width:100%;
                    z-index: 506;
                    padding:8px;
                    box-sizing: border-box;
                    li{
                        a{
                            img{
                                width:100%;
                            }
                            p{
                                &.text{
                                    padding:4px;
                                }
                            }
                        }
                    }
                    &.cmap{
                        // align-self:flex-end;
                        width:310px;  
                        flex-shrink:0;
                        display: flex;
                        flex-wrap: wrap;
                        li{
                            width:33.333%;
                            padding:6px;
                            box-sizing: border-box;
                            a{
                                display: flex;
                                flex-direction: column;
                                color:#333;
                                p{
                                    text-align: center;
                                    white-space:nowrap;
                                }
                                img{
                                    width:100%;
                                    border:1px solid #ccc;
                                    padding:2px;
                                    border-radius: 4px;
                                }
                            }
                        }
                    }
                    &.tools{
                        li{
                            border-radius: 4px;
                            padding:4px 0;
                            position: relative;
                            border-bottom:1px solid #eee;
                            a{
                                display: flex;
                                flex-direction: column;
                                justify-content: center;
                                position: relative;
                                p{
                                    display: flex;
                                    justify-content: center;
                                    padding:2px 0;
                                    i{
                                        font-size:22px;
                                    }
                                }
                                .more{
                                    width: 0;
                                    height: 0;
                                    border-bottom: 10px solid #e67e22;
                                    border-right: 10px solid transparent;
                                    position: absolute;
                                    left: 0;
                                    bottom: -2px;
                                    text-indent: -999px;
                                    overflow: hidden;
                                }
                            }
                            &:hover{
                                background: #1A9DFB;
                                a{
                                    p{
                                        color:#fff;
                                    }
                                }
                            }
                            & > .smenu{
                                border:1px solid #f00;
                                position: absolute;
                                right:80px;
                                top:0;
                            }
                        }
                    }
                }
                
            }
            
            
            &>a{
                display: flex;
                // flex-direction: column;
                justify-content: center;
                align-items: center;
                // background: #fff;
                padding:5px 10px;
                // &:hover{
                //     background: #1A9DFB;
                // }
                
                
                i{
                    font-size: 18px;
                    line-height: 18px;
                    padding-top:4px;
                    text-align: center;
                    color: #1A9DFB;
                    display: flex;
                    align-items: center;
                    // background: #f00;
                    // height:60px;
                }
                p{
                    font-size: 14px;
                    text-align: center;
                    padding:0 4px;
                }
                &:hover,&.hover{
                    border-radius: 4px;
                    background: #1A9DFB;
                    color:#fff;
                    &>i{
                        color:#fff;
                    }
                    &>p{
                        color:#fff;
                    }
                    
                }
                &.hover{
                    & + .smenu{
                        display: flex;
                        
                    }
                }
            }
            
        }
    }
}
.floatBoxBtn {
    display: block;
    position: absolute;
    width: 50px;
    line-height: 50px;
    border: 1px solid rgba(0, 0, 0, .1);
    border-radius: 3px;
    background-color: hsl(var(--b1));
    background-clip: padding-box;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1);
    box-sizing: border-box;
    z-index: 1001;
    margin: 50px 0 0 10px;
    text-align: center;

    a {
        display: block;

        i {
            font-size: 22px;
            color: #1A9DFB;
        }
    }
}

.floatBox {
    display: block;
    position: absolute;
    width: 360px;
    border: 1px solid rgba(0, 0, 0, .1);
    border-radius: 3px;
    background-color: hsl(var(--b1));
    background-clip: padding-box;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1);
    box-sizing: border-box;
    z-index: 500;
    margin: 50px 0 0 10px;
    padding: 10px 0 0 0;
    min-height: 260px;

    .close {
        background: #1A9DFB;
        height: 22px;
        width: 22px;
        line-height: 22px;
        color: #fff; // border-radius: 50%;
        position: absolute;
        right: 0px;
        top: 0px;
        text-align: center;
        cursor: pointer;

        i {
            font-size: 16px;
        }
    }
    
    .search_tag_box {
        text-align: left;
        overflow: hidden;

        ul {
            padding: 15px 20px 0 20px;

            li {
                display: inline-block;
                font-size: 14px;
                padding: 8px 15px;
                text-align: center;

                i {
                    display: none;
                }
            }

            .hov {
                border-radius: 20px;
                background: #3FB3FF;
                color: #fff;

                i {
                    display: inline-block;
                }
            }
        }

        .tit {
            border-bottom: 1px solid #eee;
            border-color:hsl(var(--b3));
            padding: 8px 0;
            margin: 0 15px;
            font-size: 14px;

            i {
                padding: 0 5px 0 0;
            }
        }
    }

    .tabList {
        padding: 8px 0px 0 5px;
        font-size: 0;
        text-align: center;

        .layui-btn {
            margin: 0 2px 5px 2px;
            padding: 0 5px;
            border-radius: 3px;
        }
    }

    .map-layer {
        @aroundSize: 54px;
        @iconSize : 30px;
        @iconFix : 6px;
        @fontLine : 54px;
        width: 90%;
        margin: 0 auto;
        padding: 0 0 5px 0;
        max-height: 500px;
        overflow: auto;

        &::-webkit-scrollbar {
            /*滚动条整体样式*/
            width: 8px;
            /*高宽分别对应横竖滚动条的尺寸*/
            height: 8px;
        }

        &::-webkit-scrollbar-thumb {
            /*滚动条里面小方块*/
            border-radius: 10px;
            background-color: #51a6fe;
        }

        &::-webkit-scrollbar-corner {
            background-color: #ccc;
        }

        &::-webkit-scrollbar-track {
            /*滚动条里面轨道*/
            box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
            background: #eee;
            border-radius: 10px;
        }

        .layerBtnMore {
            background: #ccc;
            border-radius: 20px;
            text-align: center;
            margin: 8px auto 0 auto;
            width: 50%;
            background: #3FB3FF;
            cursor: pointer;

            i {
                color: #fff;
                font-size: 6px;
            }
        }

        h2 {
            background: #eee;
            border-radius: 10px;
            padding: 5px 10px;
            font-size: 12px;
            margin: 8px auto 0 auto;
            width: 88%;
        }

        &>ul {
            margin: 0px 0;
            overflow: hidden;
            .scrollbar();
        }

        li {
            font-size: 0;
            vertical-align: top;
            text-align: center;
            display: inline-block;
            margin: 11px 0 0 16px;
            position: relative;
            width: @aroundSize;

            .icon_around {
                overflow: hidden;
                display: inline-block;
                width: @aroundSize;
                height: @aroundSize;
                // line-height: @fontLine;
                font-size: 0;
                background: #ccc;
                border-radius: 50%;
                color: #fff;
                display: flex;
                align-items: center;
                justify-content: center;

                i {
                    font-size: @iconSize;
                    // border: 1px solid #f00;
                    // box-sizing: border-box;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    // vertical-align:middle;
                    // line-height: @iconSize;
                    // margin-bottom:-8px;
                    // background: #000;
                    padding: @iconFix 0 0px 0;
                    height: @iconSize - @iconFix;
                    // margin:0 0 -4px 0;
                    // padding:0;
                    // height:@iconSize;
                    // line-height:0;
                    // text-edge: cap alphabetic;
                    // leading-trim: both;
                }
            }

            .layui-anim-loop {
                display: none;
            }

            .text {
                display: block;
                margin-top: 8px;
                font-size: 11px;
                line-height: 16px;
                color: hsl(var(--ac));
                font-weight: bold;
                letter-spacing: -.9px;
                // white-space: nowrap;
                width: 100%;
                text-overflow: ellipsis;
                overflow: hidden;
            }

            .yes {
                background: #00c73c;
                position: absolute;
                border-radius: 50%;
                width: 18px;
                height: 18px;
                line-height: 18px;
                right: 0;
                bottom: 20px;
                display: none;

                i {
                    color: #fff;
                    line-height: 18px;
                    font-size: 12px;
                    display: block;
                }
            }

            .bg_around_orange {
                background: #FE8C52;
            }

            .bg_around_yellow {
                background: #FFBA01;
            }

            .bg_around_darkblue {
                background: #3FB3FF;
            }

            .bg_around_lightblue {
                background: #5C9ACE;
            }

            .bg_around_grayblue {
                background: #9AABBD;
            }

            .bg_around_rosered {
                background: #D887E8;
            }

            .bg_around_pink {
                background: #FF7265;
            }
        }

        li.act {
            .yes {
                display: block;
            }

            .bg_around_darkblue {
                background: #FE8C52;
            }
        }

        li.loading {
            .icon_around {
                display: none;
            }

            .layui-anim-loop {
                display: block;
            }
        }
    }
}

.search-bar {
    // border-bottom: 1px solid #eee;
    margin: 0 10px 10px 10px;
    display: block;
    padding: 12px 0px 12px 0px;
    text-align: center;
    overflow: hidden;

    .layui-inline {
        margin: 0;
        display: inline-block;
    }

    .fl {
        float: left;
        width: 30px;
    }

    .fr {
        margin: 0 0 0 30px;
        position: relative;

        .clear {
            position: absolute;
            top: 5px;
            right: 5px;

            i {
                font-size: 16px;
                color: #333;
            }
        }
    }

    i {
        font-size: 22px;
        color: #ccc;
        margin-right: 10px;
        float: left;
    }

    .ip-line {
        .layui-input {
            width: 310px;
        }

        .search_btn {
            position: absolute;
            right: 0;
            top: 7px;
            cursor: pointer;

            i {
                color: #1A9DFB;
            }
        }

        .think_box {
            border: 1px solid #eee;
            position: absolute;
            background: #fff;
            width: 99.5%;

            li {
                text-align: left;
                clear: both;
                overflow: hidden;
                padding: 5px 8px;
                line-height: 26px;
                font-size: 14px;
                display: block;
                border-bottom: 1px solid #eee;
                cursor: pointer;

                .icon {
                    float: left;
                    overflow: hidden;
                    font-size: 12px;
                }
            }
        }
    }

    .layui-form-item {
        margin: 0;
    }

    .layui-form-select {
        width: 100px;
    }

    .layui-input {}

    // input{
    //   border   :0;
    //   font-size:20px;
    //   color    :#333;
    //   width    :100%;
    // }
}

